<template>
  <div class="box">
    <el-card>
      <el-button
        type="primary"
        @click="addType"
        v-btn-auth="'btn.Trademark.add'"
        size="small"
        class="btn"
        >添加品牌</el-button
      >
      <el-badge :value="1" class="item" type="primary">
        <el-button type="primary" disabled size="small"
          >将此页面到处到Excel</el-button
        >
      </el-badge>
    </el-card>

    <el-card>
      <el-table :data="typeArr" border style="width: 100%">
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="tmName" label="品牌名称" width="180">
        </el-table-column>
        <el-table-column label="品牌Logo">
          <template slot-scope="{ row, index }">
            <img
              :src="row.logoUrl"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="logoUrl"
          label="品牌操作"
          flexed="right"
          width="200px"
        >
          <template slot-scope="{ row }">
            <el-button size="mini" @click="edit(row)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              iconColor="red"
              @onConfirm="del(row)"
              title="这是一段内容确定删除吗？"
            >
              <el-button
                class="el-icon-delete"
                size="mini"
                slot="reference"
                type="danger"
              ></el-button>
              <!-- <el-button slot="reference">删除</el-button> -->
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next, jumper,->,sizes,total"
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="page"
        background
        :page-size="limit"
        :page-sizes="[5, 10, 15]"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      :title="isId ? '修改品牌' : '新增品牌'"
      :visible.sync="show"
      width="50%"
      center
    >
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="100px">
          <el-input v-model="form.tmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片上传" label-width="100px">
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "index",
  components: {},
  data() {
    return {
      page: 1,
      limit: 5,
      show: false,
      form: { id: "", tmName: "", logoUrl: "" },
      isId: 0,
    };
  },
  computed: {
    ...mapState("gettype", ["total", "typeArr"]),
  },
  methods: {
    ...mapActions("gettype", ["getTypeList", "getTypeSave", "deleteType"]),
    getList() {
      //仓库里的方法
      this.getTypeList([this.page, this.limit]);
    },
    changePage(value) {
      // console.log(value);
      this.page = value;
      this.getList();
    },
    changeSize(value) {
      this.limit = value;
      this, this.getList();
    }, //图片上传之前的钩子函数
    /**
     * 图片上传
     */
    //文件上传之前的钩子upload
    //在上传图片之前可以进行大小约束、类型约束
    //jpg|png|gif 2M
    beforeAvatarUpload(file) {
      if (
        file.type == "image/png" ||
        file.type == "image/gif" ||
        file.type == "image/jpeg"
      ) {
        //约束三种文件类型的大小 字节->kb->mb
        if (file.size / 1024 / 1024 < 2) {
          return true;
        } else {
          this.$message.error("上传头像请小于2mb");
          return false;
        }
      } else {
        //错误提示
        this.$message.error("请上传jpg|gif|png图片");

        return false;
      }
    },
    handleAvatarSuccess(res, file) {
      // this.form.logoUrl = URL.createObjectURL(file.raw);
      this.form.logoUrl = res.data;
    },
    edit(row) {
      this.show = true;
      this.isId = row.id;
      this.form.id = row.id;
      this.form.tmName = row.tmName;
      this.form.logoUrl = row.logoUrl;
    },
    addType() {
      this.page = 1;
      this.show = true;
      this.isId = 0;
      this.form.tmName = "";
      this.form.logoUrl = "";
    },
    /* 确定按钮 */
    async save() {
      this.show = false;

      try {
        await this.getTypeSave(this.form);
        this.changePage(this.form.id ? this.page : 1);
        this.$message.success("成功");
      } catch (error) {
        this.$message.error("失败");
      }
    },
    async del(row) {
      try {
        this.deleteType(row.id);
        this.getList();
        this.$message.success("成功");
      } catch (error) {
        this.$message.error("失败");
      }
    },
  },

  mounted() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 10px;
  .el-table {
    .el-button {
      margin: 0 10px;
    }
  }
  .btn {
    margin-right: 10px;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
